<template>
    <div class="box_alarm">
        <MoodalTitle :title="'实时情况'" />
        <div class="flex">
            <div class="box_le">
                <p class="box_p">{{sumMonth}} <span style="font-size: 1.4rem;">件</span></p>
                <p>本月上报数</p>
            </div>
            <div class="box_le">
                <p class="box_p">{{sumMonth}} <span style="font-size: 1.4rem;">件</span></p>
                <p>本月上报数</p>
            </div>
            <div class="box_le">
                <p class="box_p">{{sumMonth}} <span style="font-size: 1.4rem;">件</span></p>
                <p>本月上报数</p>
            </div>
        </div>
    </div>
</template>
<script>
import MoodalTitle from '@/components/ModalTitle/Index.vue'
import {ZhiShiJianGuan} from '@/api/zhangzi/index'
export default {
    components: { MoodalTitle },
    data() {
        return {
            sumMonth:''
        }
    },
    mounted(){
        this.ZhiShiJn()
    },
    methods:{
        // 实时情况
        ZhiShiJn() {
            ZhiShiJianGuan.getsituation().then(res =>{
                console.log(res,'实时情况');
                if(res.code == 200){
                    this.sumMonth = res.data.sumMonth
                }
            })
    }
}
}
</script>

<style lang="less" scoped>
.box_alarm {
    width: 50rem;
    height: 19.7rem !important;
    margin-bottom: 1.9rem;
}
.flex {
    display: flex;
    justify-content: space-between;
}
.box_le {
    margin-top: 3rem;
    width: 13.7rem;
    height: 8.1rem;
    text-align: center;
    color: #fff;
    font-size: 1.4rem;
    background-image: url(../../../../assets/images//zhangzi//Special/Escalation.png);
    .box_p{
        margin: 0.8rem 0 0.3rem 0;
        font-size: 2.8rem !important;
        color: #219EFF;
    }
}
</style>